<template>
  <div class="domestic-service">
    <!-- 顶部导航栏 -->
    <mt-header>
      <router-link to="/"
                   slot="left">
        <mt-button icon="back"
                   class="mintui">家政服务标准</mt-button>
      </router-link>
    </mt-header>
    <!-- 中间 -->
    <div class="mid-mid">
       <div class="mid">
       <div class="server-top">
        <span class="shuxian"></span>
        <span>服务标准</span>
       </div>
       <div class="service-Area">
         <van-cell title="服务区域："
         :value="zhucelocal"
                clickable
                name="area"
                @click="isUpdateFarenShowArea = true"
                arrow-direction="down"
                is-link  />
        <van-popup v-model="isUpdateFarenShowArea"
                 position="bottom">
        <van-area :area-list="areaList"
                  @confirm="onConfirmThree"
                  @cancel="isUpdateFarenShowArea = false" />
      </van-popup>
       </div>
       <div class="service-type">
         <div>服务类型:</div>
         <div class="all-button-top" v-for="item in text" :key="item.id">
         <span :class="indexs === index ? 'artict' : ''" class="span" @click="cutTabClick($event,index)">{{item.name}}</span>
         </div>
       </div>
       <div class="star-standard">
         <div>星级标准：</div>
         <div class="all-button-buttom" v-for="item in list" :key="item.id">
         <span class="span" @click="cutTabClick($event,index)">{{item.name}}</span>
         </div>
       </div>
  </div>
    </div>
    <!-- 底部按钮 -->
    <van-button type="primary" size="large" class="btn-btm" to="/my" @click="getSearch" round>家政服务标准查询</van-button>
  </div>
</template>

<script>
// 引入moke.js
import '@/mock/ljl-mock.js'
// 导入处理省市的文件
import AeraList from '../../../../utils/area.js'
// 导入接口
import { domeservice } from '@/api/HomeServerCompany'
export default {
  name: 'DomesticService',
  props: {},
  data () {
    return {
      indexs: 0,
      index: '',
      text: [{
        id: 1, name: '月嫂'
      },
      {
        id: 2, name: '育婴师'
      },
      {
        id: 3, name: '保洁/清'
      },
      {
        id: 4, name: '保姆'
      },
      {
        id: 5, name: '早教/托'
      },
      {
        id: 6, name: '养老/陪'
      },
      {
        id: 7, name: '家装/搬'
      },
      {
        id: 8, name: '产康师'
      }
      ],
      list: [{
        id: 1, name: '一星'
      },
      {
        id: 2, name: '二星'
      },
      {
        id: 3, name: '三星'
      },
      {
        id: 4, name: '四星'
      },
      {
        id: 5, name: '五星'
      },
      {
        id: 6, name: '金星'
      }
      ],
      // 地区
      zhucelocal: '',
      isUpdateFarenShowArea: false,
      // area省市区
      areaList: AeraList
    }
  },
  created () {
    this.getxx()
  },
  methods: {
    async getxx () {
      const data = await domeservice()
      console.log(data)
    },
    // 第三个选择器
    onConfirmThree (value) {
      const arr = value;
      const SelectProvinceName = arr[0].name; // 省
      const SelectCityName = arr[1].name; // 市
      const SelectCountyName = arr[2].name; // 区
      this.zhucelocal = [SelectProvinceName + SelectCityName + SelectCountyName]
      this.zhucelocal = this.zhucelocal.join('')
      // console.log(this.zhucelocal)
      this.isUpdateFarenShowArea = false
    },
    // 点击高亮显示
    cutTabClick (e, index) {
      if (e.target.className.indexOf('artict') === -1) {
        e.target.className = 'span artict'
      } else {
        e.target.className = 'span'
      }
    },
    getSearch() {
    }
  }
}
</script>
<style lang="less" scoped>
.domestic-service {
  background-color: #f8f8f8;
  .mint-header {
    height: 120px;
    background-color: #1196db;
    .mt-button {
      font-size: 32px;
    }
    /deep/ .mintui {
      font-size: 34px;
    }
  }
  .mid-mid {
    // position: relative;
    height: 800px;
    .mid {
      // position: absolute;
      // left:30px;
      // right: 30px;
      // top: -10px;
      // background-color: pink;
      .server-top {
        padding: 0 10px 0 10px;
        height: 90px;
        border-bottom: 1px solid #ccc;
        font-size: 32px;
        line-height: 90px;
        .shuxian {
          height: 22px;
          border-left: 15px solid #a7a7a7;
          margin-right: 15px;
        }
      }
      .service-Area {
        padding: 0 10px 0 10px;
        height: 90px;
        border-bottom: 1px solid #ccc;
        font-size: 32px;
        line-height: 90px;
        display: flex;
        justify-content: space-between;
      }
    .service-type {
    font-size: 30px;
    margin-left: 32px;
    height: 90px;
    line-height: 70px;
    margin-bottom: 200px;
  }
  .all-button-top {
    margin-top: 20px;
    display: inline-block;
    margin-bottom: 1px solid #ccc;
  }
  /deep/ .span {
    display: inline-block;
    margin-right: 20px;
    margin-top: 20px;
    padding: 0 20px 0 20px;
    height: 50px;
    color:#9A9391;
    border: 1px solid #9A9391;
    border-radius: 50px;
    line-height: 50px;
    text-align: center;
  }
  .artict {
    background: #1196db;
    color:#fff;
    border: 1px solid #1196db;
  }
  .star-standard {
    font-size: 30px;
    margin-left: 32px;
    height: 90px;
    line-height: 70px;
    margin-bottom: 200px;
  }
  .all-button-buttom {
    margin-top: 20px;
    display: inline-block;
    margin-bottom: 1px solid #ccc;
  }
    }
  }
  /deep/ .btn-btm {
    height: 98px;
    // margin-bottom: 298px;
    padding: 0 20px;
    background-color: #1196db;
    width: 650px;
    margin-left: 40px;
    /deep/ .van-button__content {
      padding: 0 20px;
    }
  }
}
</style>
